<template>
    <a-row>
        <a-card>
            <a-form :form="form" @submit="save">
                <a-col span="24">
                    <a-form-item label="收费项目" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder='输入收费项目'  v-decorator="['toll_name']" disabled></a-input>
                    </a-form-item>
                </a-col>
                <a-col span="24" v-if="youhui == 1">
                    <a-form-item label="优惠名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder='输入优惠名称' v-decorator="['name', {
                            rules: [{required: true, message: '名称必须填写'}]
                        }]"></a-input>
                    </a-form-item>
                </a-col>
                <a-col span="24" v-else>
                    <a-form-item label="标准名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder='输入标准名称' v-decorator="['name', {
                            rules: [{required: true, message: '名称必须填写'}]
                        }]"></a-input>
                    </a-form-item>
                </a-col>
                <a-col span="24" v-if="youhui == 1">
                    <a-form-item label="优惠方式" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-select placeholder='优惠方式' @change="styleChange" v-decorator="['style',
                                {
                                    rules: [{required: true, message: '请选择类型'}]
                                }
                            ]">
                                <a-select-option value="1">
                                    折扣
                                </a-select-option>
                                <a-select-option value="3">
                                    金额
                                </a-select-option>
                            </a-select>
                    </a-form-item>
                </a-col>
                <a-col span="24" v-else>
                    <a-form-item label="金额计算方式" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-select placeholder='金额计算方式' @change="styleChange" v-decorator="['style',
                                {
                                    rules: [{required: true, message: '请选择类型'}]
                                }
                            ]">
                            <a-select-option value="1">
                                单价*数量
                            </a-select-option>
                            <a-select-option value="2">
                                每户单独输入
                            </a-select-option>
                            <a-select-option value="3">
                                固定金额
                            </a-select-option>
                            <a-select-option value="4">
                                自定义公式
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <div v-if="youhui == 1">
                    <a-col span="24" v-if="canPrice">
                        <a-form-item label="折扣" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-col span="5">
                                <a-input-number placeholder='输入折扣'
                                                v-decorator="['price', {
                                    rules: [{required: true, message: '折扣必须填写'}]
                                }]"
                                />
                            </a-col>
                        </a-form-item>
                    </a-col>
                    <a-col span="24" v-if="fixPrice">
                        <a-form-item label="金额" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-input placeholder='输入优惠金额' addonAfter="元" v-decorator="['fixed_price', {
                            rules: [{required: true, message: '金额必须填写'}]
                        }]">
                            </a-input>
                        </a-form-item>
                    </a-col>
                    <a-col span="24">
                        <a-form-item label="起始时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-date-picker placeholder="请选择时间" v-decorator="['start_time',{ruleds:[{trquired:true,message:'时间不可为空'}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col span="24">
                        <a-form-item label="结束时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-date-picker placeholder="请选择时间" v-decorator="['end_time',{ruleds:[{trquired:true,message:'时间不可为空'}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col span="24">
                        <a-form-item label="是否默认" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-select placeholder='选择默认' :options="[{value:1,label:'是'},{value:0,label:'否'}]" v-decorator="['dft',
                                {
                                    rules: [{required: true, message: '请选择是否默认'}]
                                }
                            ]">
                                <a-select-option value="1">
                                    是
                                </a-select-option>
                                <a-select-option value="0">
                                    否
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </div>
                <div v-else>
                    <a-col span="24" v-if="canPrice">
                        <a-form-item label="单价" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-col span="5">
                                <a-input-number placeholder='输入单价'
                                                v-decorator="['price', {
                                    rules: [{required: true, message: '单价必须填写'}]
                                }]"
                                />
                            </a-col>
                        </a-form-item>
                    </a-col>
                    <a-col span="24" v-if="canPrice">
                        <a-form-item label="计量方式" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-select placeholder='选择计量方式' v-decorator="['count_style',
                                {
                                    rules: [{required: true, message: '请选择计量方式'}]
                                }
                            ]">
                                <a-select-option value="1">
                                    房屋建筑面积（平米）
                                </a-select-option>
                                <a-select-option value="2">
                                    房屋套内面积（平米）
                                </a-select-option>
                                <!-- <a-select-option value="3">
                                    房屋公摊面积（平米）
                                </a-select-option> -->
                                <a-select-option value="4">
                                    用量（止度-起度）
                                </a-select-option>
                                <a-select-option value="5">
                                    车位面积（平米）
                                </a-select-option>
                                <a-select-option value="6">
                                    车辆排量
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col span="24" v-if="fixPrice">
                        <a-form-item label="固定金额" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-input placeholder='输入固定金额' addonAfter="元" v-decorator="['fixed_price', {
                            rules: [{required: true, message: '金额必须填写'}]
                        }]">
                            </a-input>
                        </a-form-item>
                    </a-col>
                    <a-col span="24" v-if="selfCheck">
                        <a-form-item label="自定义公式" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-select placeholder='选择自定义公式' v-decorator="['formula_id',
                            {
                                rules: [{required: true, message: '请选择自定义公式'}]
                            }
                        ]">
                                <a-select-option :value="item.id" v-for="(item, index) in seleList" :key="index">
                                    {{ item.name }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </div>
                <a-col span="24" v-if="pro_project_type == 1">
                    <a-form-item label="收费周期" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder='输入收费周期' addonAfter="月" v-decorator="['count_week', {
                            rules: [{required: true, message: '名称必须填写'}]
                        }]">
                        </a-input>
                    </a-form-item>
                </a-col>
                <a-col span="24">
                    <a-form-item label="备注" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder="请输入备注" v-decorator="['remarks']">
                        </a-input>
                    </a-form-item>
                </a-col>
                <a-col span="24">
                    <a-form-item :wrapper-col="{offset: 8}">
                        <a-button type="primary" html-type="submit">
                            保存
                        </a-button>
                        <a-button html-type="submit" style="margin-left: 20px;" @click="back">
                            返回
                        </a-button>
                    </a-form-item>
                </a-col>
            </a-form>
        </a-card>
    </a-row>
</template>
<script>
import { getTollFormula, saveTollDetail, lookTollDetail,updateTollDetail } from '@/api/cashier'
import moment from 'moment'
import { mapGetters } from 'vuex'
export default {
    name: 'charge_toll_detail_add',
    data() {
        return {
            form: this.$form.createForm(this),
            labelCol: {
              xs: { span: 24 },
              sm: { span: 8 },
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 8 },
            },
            getdata:{},
            dateFormat: 'YYYY/MM/DD',
            canPrice: true,
            fixPrice: false,
            selfCheck: false,
            youhui: 0,
            seleList: [{id:0,name:'物业费'}],
            pro_id: 0,
            pro_project_type:0
        }
    },
    async mounted() { 
        this.getForm()
        

        if(this.$route.params.edit_id!='add') {
          let res= await lookTollDetail({id: this.$route.params.edit_id,token:this.token()}).then(res => {
                return res;
            }).catch(err => {
                console.log(err)
            })
            if (res.data.p_name == '优惠规则') {
                this.youhui = 1;
            }
                this.getdata=res.data
                this.pro_id = res.data.project_id
                this.pro_project_type=res.data.project
                switch(String(res.data.style)) {
                    case '1':
                        this.canPrice = true
                        this.fixPrice = false
                        this.selfCheck = false
                        setTimeout(() => {
                            this.form.setFieldsValue({
                                toll_name:res.data.p_name,
                                start_time:moment(res.data.start_time, 'YYYY-MM-DD'),
                                end_time:moment(res.data.end_time, 'YYYY-MM-DD'),
                                dft:res.data.dft,
                                name: res.data.name,
                                remarks: res.data.remarks,
                                price: res.data.price,
                                count_week: res.data.count_week,
                                // fixed_price: res.data.fixed_price,
                                count_style: res.data.count_style?String(res.data.count_style):'1',
                                // formula_id: res.data.formula_id,
                                style: String(res.data.style)
                            })
                         },500)
                        break
                    case '2':
                        this.canPrice = false
                        this.fixPrice = false
                        this.selfCheck = false
                        setTimeout(() => {
                            this.form.setFieldsValue({
                                toll_name:res.data.p_name,
                                start_time:moment(res.data.start_time, 'YYYY-MM-DD'),
                                end_time:moment(res.data.end_time, 'YYYY-MM-DD'),
                                dft:res.data.dft,
                                name: res.data.name,
                                remarks: res.data.remarks,
                                // price: res.data.price,
                                count_week: res.data.count_week,
                                // fixed_price: res.data.fixed_price,
                                // count_style: res.data.count_style?String(res.data.count_style):'1',
                                // formula_id: res.data.formula_id,
                                style: String(res.data.style)
                            })
                         },500)
                        break
                    case '3':
                        this.canPrice = false
                        this.fixPrice = true
                        this.selfCheck = false
                        setTimeout(() => {
                            this.form.setFieldsValue({
                                toll_name:res.data.p_name,
                                start_time:moment(res.data.start_time, 'YYYY-MM-DD'),
                                end_time:moment(res.data.end_time, 'YYYY-MM-DD'),
                                dft:res.data.dft,
                                name: res.data.name,
                                remarks: res.data.remarks,
                                // price: res.data.price,
                                count_week: res.data.count_week,
                                fixed_price: res.data.fixed_price,
                                // count_style: res.data.count_style?String(res.data.count_style):'1',
                                // formula_id: res.data.formula_id,
                                style: String(res.data.style)
                            })
                         },500)
                        break
                    case '4':
                        this.selfCheck = true
                        this.canPrice = false
                        this.fixPrice = false
                        setTimeout(() => {
                            this.form.setFieldsValue({
                                toll_name:res.data.p_name,
                                start_time:moment(res.data.start_time, 'YYYY-MM-DD'),
                                end_time:moment(res.data.end_time, 'YYYY-MM-DD'),
                                dft:res.data.dft,
                                name: res.data.name,
                                remarks: res.data.remarks,
                                // price: res.data.price,
                                count_week: res.data.count_week,
                                // fixed_price: res.data.fixed_price,
                                // count_style: res.data.count_style?String(res.data.count_style):'1',
                                formula_id: res.data.formula_id,
                                style: String(res.data.style)
                            })
                         },500)
                        break

                }    
        }else{
            if (this.$route.params.name == '优惠规则') {
                this.youhui = 1;
            }
            this.pro_id = this.$route.id
            this.pro_project_type=this.$route.params.project_type
            this.form.setFieldsValue({
                toll_name: this.$route.params.name
            });
        }
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        styleChange(value) {
            switch(value) {
                case '1':
                    this.canPrice = true
                    this.fixPrice = false
                    this.selfCheck = false
                    break
                case '2':
                    this.canPrice = false
                    this.fixPrice = false
                    this.selfCheck = false
                    break
                case '3':
                    this.canPrice = false
                    this.fixPrice = true
                    this.selfCheck = false
                    break
                case '4':
                    this.selfCheck = true
                    this.canPrice = false
                    this.fixPrice = false

            }
        },
        getForm() {
            getTollFormula({token:this.token()}).then(res => {
                this.seleList = res.data
            }).catch(err => {
                console.log(err)
            })
        },
        back() {
            this.$router.go(-1)
        },
        // 保存数据
        save(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    console.log('Received values of form: ', values);
                    delete values.toll_name
                    if(this.$route.params.edit_id !='add') {
                        values.id = this.$route.params.edit_id
                        values.project_id = this.pro_id
                        updateTollDetail(Object.assign(values,{token:this.token()})).then(res => {
                            if(res.code == 0) {
                                this.$notification.success({
                                    message: '成功',
                                    description: res.msg
                                })
                                setTimeout(() => {
                                    this.$router.push({name: 'charge_toll_index'})
                                }, 1000)
                            } else {
                                this.$notification['error']({
                                    message: '错误',
                                    description: res.msg,
                                    duration: 4
                                })
                            }
                        }).catch(err => {
                            this.$notification['error']({
                                message: '错误',
                                description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                                duration: 4
                            })
                        })
                    } else {
                        values.project_id = this.$route.params.id
                        values.id = 0
                        console.log(values)
                        saveTollDetail(Object.assign(values,{token:this.token()})).then(res => {
                            if(res.code == 0) {
                                this.$notification.success({
                                    message: '成功',
                                    description: res.msg
                                })
                                setTimeout(() => {
                                    this.$router.push({name: 'charge_toll_index'})
                                }, 1000)
                            } else {
                                this.$notification['error']({
                                    message: '错误',
                                    description: res.msg,
                                    duration: 4
                                })
                            }
                            
                        }).catch(err => {
                            this.$notification['error']({
                                message: '错误',
                                description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                                duration: 4
                            })
                        })
                    }
                }
            })
        }
    }
}
</script>
<style scoped>
    
</style>